<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff">
			<block slot="content">商品</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="index_a">
				<view class="header_wrap">
					<view class="header_wrap_b">
						<input  placeholder="搜索商品/课程" v-model="keyword" placeholder-style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #BBBBBB;"/>
					</view>
					<view class="header_wrap_a">
						<u-icon name="search" color="#BBBBBB" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="index_b">
				<u-swiper
						:list="img_list"
						indicator
						indicatorMode="line"
						circular
						radius='0'
						height='320rpx'
						@click="ad_click"
				></u-swiper>
			</view>
			<view class="index_b_d_aaa">
				<u-tabs
					ref="tabs" 
					:current="current" 
					@click="tabsChange" 
					lineColor="#E71102"
					:activeStyle="{
							fontSize: '28rpx',
							fontFamily: 'PingFang SC',
							fontWeight: '800',
							color: '#E71102'
							}"
					:inactiveStyle="{
							fontSize: '28rpx',
							fontFamily: 'PingFang SC',
							color: '#333333'
							}"
					itemStyle="padding-left:20rpx; padding-right:20rpx; height: 80rpx;"
					:list="goodscategory_list" 
					:is-scroll="false"
					>
				</u-tabs>
			</view>
			<view class="index_e">
				<GoodsList :list="goodsList" is_type="1"></GoodsList>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无记录</text>
				</view>
			</loading-footer>
		</view>
		<u-tabbar
			:value="value1"
			:fixed="true"
			:border="false"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			activeColor="#E71102"
			inactiveColor="#666666"
			zIndex='99'
			@change="tabbar_change"
		>
			<u-tabbar-item text="首页" :icon="value1==0?'/static/tabbar_11.png':'/static/tabbar_1.png'" ></u-tabbar-item>
			<u-tabbar-item text="商品" :icon="value1==1?'/static/tabbar_22.png':'/static/tabbar_2.png'" ></u-tabbar-item>
			<u-tabbar-item text="课程" :icon="value1==2?'/static/tabbar_33.png':'/static/tabbar_3.png'" ></u-tabbar-item>
			<u-tabbar-item text="购物车" :icon="value1==3?'/static/tabbar_44.png':'/static/tabbar_4.png'" ></u-tabbar-item>
			<u-tabbar-item text="我的" :icon="value1==4?'/static/tabbar_55.png':'/static/tabbar_5.png'" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
import request from '@/common/request.js';
import {
	loadingType,
	trottle
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			value1:1,
			current:0,
			uid:0,
			goods_banner:[],
			img_list:[],
			first_category_id:0,
			goodsList:[],
			goodscategory_list:[],
			status: loadingType.LOADING,
			page: 1,
			limit:8,
		}
	},
	onShareAppMessage(res) { //发送给朋友
		return {
			title:'爱物生',
			path:'/pages/home/vendor'
		}
	},
	onShareTimeline(res) {//分享到朋友圈
		return {
			title:'爱物生',
			path:'/pages/home/vendor'
		}
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
	},
	onReachBottom: function() {
		this.getGoodsListFun();
	},
	mounted() {
		this.home_config_post();
		this.onRefresh();
	},
	methods: {
		tabsChange(e) {
			this.current = e.index;
			this.first_category_id = e.id;
			this.onRefresh();
		},
		home_config_post(){
			let paramsList = {
				
			}
			let optsList = {
				url: 'p-public_config',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.goods_banner=res.data.data.goods_banner;
					_this.goodscategory_list=res.data.data.GoodsCategory_list;
					_this.first_category_id =_this.goodscategory_list[0].id;
					_this.img_list=[];
					if(_this.goods_banner.length>0){
						for(let i=0;i<_this.goods_banner.length;i++){
							_this.img_list.push(_this.goods_banner[i].img);
						}
					}
				}
			});
		},
		async getGoodsListFun() {
			let {
				page,
				limit,
				goodsList,
				first_category_id,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			const paramsList = {
				page: page,
				size:limit,
				category_id:first_category_id,
				uid:this.uid,
			}
			let optsList = {
				url: 'g-goodslist',
				method: 'post'
			};
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) goodsList = []
					let {
						list,
						more
					} = res.data.data
					this.goodsList.push(...list)
					this.page = ++page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.goodsList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				this.showLoading=false;
			});
		},
		onRefresh() {
			this.page = 1
			this.goodsList = []
			this.status = loadingType.LOADING
			this.$nextTick(() => {
				this.getGoodsListFun();
			});
		},
		tabbar_change(e){
			if (e == '0') {
				uni.reLaunch({
					url: '/pages/home/vendor'
				})
				return;
			}else if (e == '1') {
				uni.reLaunch({
					url: '/pages/goods/list'
				})
				return;
			}else if (e == '2') {
				uni.reLaunch({
					url: '/pages/curriculum/list'
				})
				return;
			}else if (e == '3') {
				uni.reLaunch({
					url: '/pages/cart/list'
				})
				return;
			}else if (e == '4') {
				uni.reLaunch({
					url: '/pages/user/info'
				})
				return;
			}
		},
	}
}
</script>

<style  lang="scss" scoped>
	.index_a{
		background-color: #FFFFFF;
		height: auto;
		width: 750rpx;
		overflow: hidden;
		padding: 25rpx;
	}
	.header_wrap{
		width: 100%;
		height: 72rpx;
		border: 1rpx solid #D9D9D9;
		border-radius: 34rpx;
	}
	.header_wrap_a{
		width: 40rpx;
		height: 40rpx;
		float: right;
		margin-top: 15rpx;
		margin-left: 30rpx;
		margin-right: 15rpx;
	}
	.header_wrap_b{
		width: 480rpx;
		height: 68rpx;
		float: left;
		margin-left: 20rpx;
	}
	.header_wrap_b input{
		width: 480rpx;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	.header_wrap_c{
		width: 124rpx;
		height: 58rpx;
		background: #0166DF;
		border-radius: 29rpx;
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 58rpx;
		margin-top: 5rpx;
		margin-right: 5rpx;
		text-align: center;
	}
	.index_b{
		width: 750rpx;
		height: 320rpx;
	}
	.index_e{
		overflow: hidden;
	}
	.index_b_d_aaa{
		width: 750rpx;
		overflow: hidden;
		padding:25rpx;
	}
</style>
